<template>
	<view>
		<view class="comment">
			<view class="comment_top">
				<image src="/static/index/index1.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
				<view class="comment_top_right">
					<view class="diandiandian">
						Gucci印花兜帽卫衣Gucci印花兜帽卫
					</view>
					<view class="diandiandian" style="font-size: 26rpx;color:#8E8E8E ;">
						颜色：灰色；尺寸M
					</view>
				</view>
			</view>
			<view class="xingxing_box">
				<view class="xingxing_box_list">
					<view class="" style="margin-right: 23rpx;">
						商品评价
					</view>
					<uni-rate max="5" @change="shangping" size="26" margin="5" active-color="#AE23E7" value="0"></uni-rate>
				</view>
				<view class="xingxing_box_list">
					<view class="" style="margin-right: 23rpx;">
						物流评价
					</view>
					<uni-rate max="5" @change="wuliu" size="26" margin="5" active-color="#AE23E7" value="0"></uni-rate>
				</view>
				<view class="xingxing_box_list">
					<view class="" style="margin-right: 23rpx;">
						卖家服务
					</view>
					<uni-rate max="5" @change="maijia" margin="5" size="26" active-color="#AE23E7" value="0"></uni-rate>
				</view>
			</view>
			<view class="input_box">
				<view class="" style="height: 200rpx;">
					<input class="" min-height="200rpx" confirm-type="done" type="text" style="" maxlength="100" placeholder="商品怎么样？请把他分享出来吧" />
				</view>
				<view class="opimiom">
					<sunui-upimg upload_img_wh="width:120rpx;height:120rpx" @change="getImageInfo1" :upload_auto="true" ref="upimg1" :upload_count="4"></sunui-upimg>
				</view>
			</view> 
			<view class="" style="display: flex;align-items: center;height: 40rpx;margin-top: 20rpx;">
				
			<view class="more" v-show="!downIcon" @click="sort" ><image src="/static/user/xuanzhong.png" mode="" style="width: 40rpx;height: 40rpx;"></image></view>
			<view class="more" v-show="downIcon" @click="sort" ><image src="/static/user/weixuanzhong.png" mode="" style="width: 40rpx;height: 40rpx;"></image></view>
			<text class="ml10" style="font-size: 30rpx;">匿名提交</text>
			</view>
		</view>
		<view class="comment_fixed" @click="fabucheng">
			提交发布
		</view>
	</view>
</template>

<script>
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	import sunUiUpimg from '@/components/sunui-upimg/sunui-upimg.vue';
	export default {
		components: {
			uniRate,
			'sunui-upimg': sunUiUpimg
		},

		data() {
			return {
				opinionImgnum:'0',
				downIcon: true,
			}
		},
		methods: {
			fabucheng(){
			uni.showToast({
							title:"发布成功",
						})
						setTimeout(function(){
							uni.navigateBack({delta:1})
						},1500)
			},
			sort() {
			      this.downIcon = !this.downIcon
				  console.log(this.downIcon)
				  if(this.downIcon==false){
				  }else{
				  }
			    },
			getImageInfo1(e) {
				console.log(this.upimg_preview)
				this.opinionImgnum=e.length
			},
			shangping(e) {
				console.log(e.value)
			},
			wuliu(e) {
				console.log(e.value)
			},
			maijia(e) {
				console.log(e.value)
			},
		}
	}
</script>

<style lang="less">
	page {
		box-sizing: border-box;
		background-color: #EFEFF4;
	}

	.comment {
		width: 690rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		margin: 20rpx auto 0 auto;
		padding: 30rpx 20rpx;
		box-sizing: border-box;

		.comment_top {
			height: 80rpx;
			display: flex;

			image {
				margin-right: 20rpx;
				box-sizing: border-box;
			}

			.comment_top_right {
				width: 550rpx;
				font-size: 30rpx;
			}
		}

		.input_box {
			width: 650rpx;
			background: rgba(239, 239, 244, 1);
			border-radius: 10rpx;
			height: 400rpx;
			margin-top: 43rpx;
			padding: 28rpx 21rpx;
			box-sizing: border-box;
			position: relative;
		}
	}

	.xingxing_box {
		margin-top: 40rpx;

		.xingxing_box_list {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-family: FZHei-B01S;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			margin-top: 30rpx;
		}
	}
	.opimiom{
		height: 120rpx;
		position: absolute;
		left: 20rpx;
		bottom:20rpx;
		
	}
	.sunui-uploader-bd{
		padding: 0;
	}
	.sunui-uploader-bd{
	margin-bottom: 0 !important;
	}
	.sunui-uploader-file{
		width: 100rpx !important;
		height: 100rpx
	}
	.more{
		width: 40rpx;
		height: 40rpx;
	}
	.comment_fixed{
		position: fixed;
		bottom: 30rpx;
		width:710rpx;
		height:90rpx;
		background:rgba(115,34,216,1);
		box-shadow:0px 0px 18rpx 2rpx rgba(115,34,216,0.3);
		border-radius:20rpx;
		color: white;
		font-size: 40rpx;
		text-align: center;
		line-height: 90rpx;
		margin-left: 20rpx;
	}
</style>
